<div class="gridListdemoBasicUsage">
  <div class="data-top">
    <div style="position: relative;" ng-controller="totalTransactionCtrl">
      <a href="#/sas/omdisplay/sbs/sumStatistics">
        <table>
          <thead>
          <tr>
            <th>交易金额(元)</th>
            <th>当日统计</th>
            <th>交易量(笔)</th>
          </tr>
          <tr>
            <th>{{totalTransaction.total.todayTotalAmountOfTrans | currency:''}}</th>
            <th>(总)</th>
            <th>{{totalTransaction.total.todayTotalVolumeOfBus}}</th>
          </tr>
          </thead>
          <tbody>
          <tr ng-repeat="l in totalTransaction.list">
            <td>{{l.todayTotalAmountOfTrans | currency:''}}</td>
            <td><span>{{l.sys}}</span></td>
            <td>{{l.todayTotalVolumeOfBus}}</td>
          </tr>
          </tbody>
        </table>
      </a>
      <core-loading ng-show="totalTransaction.loding"></core-loading>
    </div>

    <div style="position: relative;" ng-controller="healthCtrl">
      <div class="panel-heading">
        <h3 class="panel-title">系统健康度</h3>
      </div>
      <!-- 字体白色添加属性colff -->
      <div class="jk-title" style="top: 120px;" ng-class="{'green':health.sumHealthState==='优',
                                       'blue':health.sumHealthState==='良',
                                       'yellow':health.sumHealthState==='中',
                                       'red':health.sumHealthState==='差'}">
        <div class="jk-one" style="font-size: 34px; line-height: 34px;">{{health.sumHealthState}}</div>
        <div class="jk-two" style="font-size: 24px; line-height: 24px;">{{health.sumHealth}}%</div>
      </div>
      <div class="panel-body" id="health">

      </div>
      <core-loading ng-show="health.loding"></core-loading>
    </div>
  </div>

  <div class="data-bottom">
    <div>
      <div style="position: relative;" ng-controller="successRateCtrl">
        <div class="panel-heading">
          <h3 class="panel-title">成功率指数</h3>
        </div>
        <div class="panel-body">
          <div class="body-block">
            <div class="body-img" id="successRateOfBus"></div>
            <div class="body-title">
              <!--<a href="#/sas/omdisplay/successRateTitle/successRate"-->
              <!--style="color: #333; text-decoration: none;">-->
              统一支付<br/>业务处理成功率
              <!--</a>-->
            </div>
          </div>
          <div class="body-block">
            <div class="body-img" id="successRateOfSys"></div>
            <div class="body-title">
              <!--<a href="#/sas/omdisplay/successRateTitle/successRate"-->
              <!--style="color: #333; text-decoration: none;">-->
              统一支付<br/>系统处理成功率
              <!--</a>-->
            </div>
          </div>
        </div>
        <core-loading ng-show="successRateModel.loding"></core-loading>
      </div>
      <div style="position: relative;" ng-controller="sysPerformanceCtrl">
        <div class="panel-heading">
          <h3 class="panel-title">系统性能指数</h3>
        </div>
        <div class="panel-body">
          <div class="body-block" style="cursor: pointer;" ui-sref="sas.analysisSysOM.tradTime.maxTradTime">
            <div class="body-img" style="background-image: url('images/data-dis-1.png');"><label>{{sysPerformance.processTime}}s</label>
            </div>
            <div class="body-title">处理耗时</div>
          </div>
          <!--<div class="body-block">-->
          <!--<div class="body-img" style="background-image: url('images/data-dis-2.png');"><label>{{sysPerformance.throughput}}个</label>-->
          <!--</div>-->
          <!--<div class="body-title">并发数</div>-->
          <!--</div>-->
          <div class="body-block" style="cursor: pointer; float: right;" ui-sref="sas.analysisSysOM.throughput.maxTps">
            <div class="body-img" style="background-image: url('images/data-dis-3.png');"><label>{{sysPerformance.tps}}TPS</label>
            </div>
            <div class="body-title">吞吐量</div>
          </div>
        </div>
        <core-loading ng-show="sysPerformance.loding"></core-loading>
      </div>
    </div>
    <div>
      <div style="position: relative;" ng-controller="realTimeController">
        <div class="panel-heading">
          <h3 class="panel-title">响应时间</h3>
        </div>
        <div class="panel-body">
          <div class="body-block">
            <div class="body-img" style="background-image: url('images/data-dis-1.png');"><label>{{realTime.maxResponseTime}}s</label>
            </div>
            <div class="body-title">最大响应时间</div>
          </div>
          <div class="body-block">
            <div class="body-img" style="background-image: url('images/data-dis-2.png');"><label>{{realTime.minResponseTime}}s</label>
            </div>
            <div class="body-title">最小响应时间</div>
          </div>
          <div class="body-block">
            <div class="body-img" style="background-image: url('images/data-dis-3.png');"><label>{{realTime.avgResponseTime}}s</label>
            </div>
            <div class="body-title">平均响应时间</div>
          </div>
        </div>
        <core-loading ng-show="realTime.loding"></core-loading>
      </div>
    </div>
    <div class="volumeOfBusCtrl">
      <div style="position: relative;" ng-controller="volumeOfBusCtrl">
        <div class="panel-heading">
          <!--<a href="#/sas/omdisplay/sbs/sumStatistics" style="text-decoration: none;">-->
          <h3 class="panel-title">实时业务量</h3>
          <!--</a>-->
        </div>
        <div class="panel-body">
          <div class="tabsdemoStaticTabs sample">
            <md-tabs class="md-accent">
              <md-tab id="splitTimeList">
                <md-tab-label>分时刻</md-tab-label>
                <md-tab-body>
                  <div class="modules" style="height: 175px;">
                    <span class="arrow left" ng-click="arrowLeft(system.sysList.length-1)"></span>
                    <ul ng-controller="splitTimeCtrl">
                      <li class="dataItem slide" ng-repeat="sys in system.sysList" repeat-finish
                          ng-class="{
                          'slider-show': $index === currentShow,
                          'slider-hide-to-left': ($index+1===system.sysList.length?0:$index+1) === currentShow,
                          'slider-hide-to-right': ($index-1===-1?system.sysList.length-1:$index-1) === currentShow,
                          'slider-hide': $index !== currentShow
                                            && ($index+1===system.sysList.length?0:$index+1) !== currentShow
                                            && ($index-1===-1?system.sysList.length-1:$index-1) !== currentShow
                          }">
                        <span class="title">{{sys.title}}</span>

                        <div id="splitTimeList{{$index}}" style="width: 100%; height: 175px;"></div>
                      </li>
                    </ul>
                    <span class="arrow right" ng-click="arrowRight(system.sysList.length-1)"></span>
                    <ul class="tabsli">
                      <li ng-repeat="sys in system.sysList" ng-click="setCurrentShow($index);"
                          ng-class="{'active': $index === currentShow}"></li>
                    </ul>
                  </div>
                </md-tab-body>
              </md-tab>
              <md-tab id="topUpPreferList">
                <md-tab-label>用户充值偏好</md-tab-label>
                <md-tab-body>
                  <div class="modules" style="height: 175px;">
                    <span class="arrow left" ng-click="arrowLeft(system.sysList.length-1)"></span>

                    <ul ng-controller="topUpPreferCtrl">
                      <li class="dataItem slide" ng-repeat="sys in system.sysList" repeat-finish
                          ng-class="{
                          'slider-show': $index === currentShow,
                          'slider-hide-to-left': ($index+1===system.sysList.length?0:$index+1) === currentShow,
                          'slider-hide-to-right': ($index-1===-1?system.sysList.length-1:$index-1) === currentShow,
                          'slider-hide': $index !== currentShow
                                            && ($index+1===system.sysList.length?0:$index+1) !== currentShow
                                            && ($index-1===-1?system.sysList.length-1:$index-1) !== currentShow
                          }">
                        <span class="jyje" style="margin-top: -10px;">充值金额（元）</span>
                        <span class="title">{{sys.title}}</span>

                        <div id="topUpPreferList{{$index}}" style="width: 100%; height: 175px;"></div>
                        <span class="jyl">交易量（{{sys.unit}}）</span>
                      </li>
                    </ul>

                    <span class="arrow right" ng-click="arrowRight(system.sysList.length-1)"></span>
                    <ul class="tabsli">
                      <li ng-repeat="sys in system.sysList" ng-click="setCurrentShow($index);"
                          ng-class="{'active': $index === currentShow}"></li>
                    </ul>
                  </div>
                </md-tab-body>
              </md-tab>
            </md-tabs>
          </div>
        </div>
        <core-loading ng-show="volumeOfBusModel.loding"></core-loading>
      </div>
    </div>

    <div>
      <div class="panel-body" style="position: relative;">
        <md-tabs class="md-accent body-height">
          <md-tab id="tab1"  md-on-select="switchTabs('provinceSuccessRateOfTrans');">
            <!-- 需要闪耀添加shine样式 -->
            <md-tab-label><span ng-class="{'shine':currentTab!=='provinceSuccessRateOfTrans'&&tabState.rateState===1}">全网31省交易成功率</span>
            </md-tab-label>
            <md-tab-body>
              <div class="body-table" ng-controller="provinceSuccessRateOfTransCtrl">
                <table>
                  <tr>
                    <td><span></span>最高</td>
                    <td ng-repeat="t in provinceSuccessRateOfTrans.top track by $index | orderBy:'rate':true">
                      <div ng-if="t">
                        {{t.provinceName}}<span style="font-size: 14px;color: #2196f3;margin-left: 10px;">{{t.rate | currency:''}}%</span>
                      </div>
                      <div ng-if="!t">--</div>
                    </td>
                  </tr>
                  <tr>
                    <td><span></span>最低</td>
                    <td ng-repeat="t in provinceSuccessRateOfTrans.bottom track by $index | orderBy:'rate':false">
                      <div ng-if="t">
                        {{t.provinceName}}<span style="font-size: 14px;color: #2196f3;margin-left: 10px;">{{t.rate | currency:''}}%</span>
                      </div>
                      <div ng-if="!t">--</div>
                    </td>
                  </tr>
                </table>
                <div class="body-map" id="provinceSuccessRateOfTrans" style="height: 480px;">
                </div>
              </div>
            </md-tab-body>
          </md-tab>
          <md-tab id="tab3" md-on-select="switchTabs('provinceVolumeOfBus');">
            <md-tab-label ><span ng-class="{'shine':currentTab!=='provinceVolumeOfBus'&&tabState.volState===1}">全网31省交易业务量</span>
            </md-tab-label>
            <md-tab-body>
              <div class="body-table" ng-controller="provinceVolumeOfBusCtrl">
                <table>
                  <tr>
                    <td><span></span>最高</td>
                    <td ng-repeat="t in provinceVolumeOfBus.top track by $index | orderBy:'volume':true">
                      <div>{{t.provinceName}}<span style="font-size: 14px;color: #2196f3;margin-left: 10px;">{{t.volume}}</span>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td><span></span>最低</td>
                    <td ng-repeat="t in provinceVolumeOfBus.bottom track by $index | orderBy:'volume':false">
                      <div>{{t.provinceName}}<span style="font-size: 14px;color: #2196f3;margin-left: 10px;">{{t.volume}}</span>
                      </div>
                    </td>
                  </tr>
                </table>
                <div class="body-map" id="provinceVolumeOfBus" style="height: 480px;">
                </div>
              </div>
            </md-tab-body>
          </md-tab>
        </md-tabs>
        <core-loading ng-show="tabState.loding"></core-loading>
      </div>
    </div>
  </div>
</div>
